/* 自定义 Element Plus 主题 */
/* 文档：https://element-plus.org/zh-CN/guide/theming.html */

// 1. 覆盖 SCSS 变量
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  // ---------- 颜色变量 ----------
  $colors: (
    'primary': (
      'base': #409EFF, // 主色
    ),
    'success': (
      'base': #67C23A,
    ),
    'warning': (
      'base': #E6A23C,
    ),
    'danger': (
      'base': #F56C6C,
    ),
    'error': (
      'base': #F56C6C,
    ),
    'info': (
      'base': #909399,
    ),
  ),

  // ---------- 尺寸变量 ----------
  $button-padding-vertical: (
    'large': 13px,
    'default': 10px,
    'small': 7px,
  ),
  $button-padding-horizontal:(
    'large': 22px,
    'default': 20px,
    'small': 15px,
  ),

  // ---------- 边框变量 ----------
  $border-radius:(
    'base': 4px,
    'small': 2px,
    'round': 20px,
    'circle': 100%,
  ),
  $border-color: (
    '': #dcdfe6,
    'light': #e4e7ed,
    'lighter': #ebeef5,
    'extra-light': #f2f6fc,
    'dark': #d4d7de,
    'darker': #cdd0d6,
  ),

  // ---------- 字体变量 ----------
  $font-family: (
    '': "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif",
  )
);

// 2. 导入所有 Element Plus 样式
@use "element-plus/theme-chalk/src/index.scss" as *;

// 3. 自定义全局样式覆盖
// ----------------------------
/* 覆盖菜单悬停背景色 */
:root {
  --el-menu-hover-bg-color: #f0f7ff; /* 使用你需要的颜色值 */
}
// 表格样式调整
.el-table {
  th {
    background-color: #f8f8f9 !important;
    font-weight: 600;
  }
}

// 按钮样式扩展
.el-button {
  &--small {
    padding: 7px 15px;
  }
}

// 弹窗圆角调整
.el-dialog {
  border-radius: 8px !important;
}

// 表单标签样式
.el-form-item__label {
  font-weight: 500;
}

// 4. 暗黑模式适配
[data-theme="dark"] {
  // 覆盖暗黑模式下的变量
  --el-bg-color: #1a1a1a;
  --el-text-color-primary: #e5e7eb;
}